<template>
  <!-- pc端导航 -->
  <div id="Nav">
    <div class="content">
      <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/" class="blog-name" v-html="title"></el-menu-item>
        <el-submenu index="2">
          <template #title>文章</template>
          <el-menu-item index="/articleClassify/1">日常</el-menu-item>
          <el-menu-item index="/articleClassify/2">技术</el-menu-item>
        </el-submenu>
        <!-- <el-menu-item index="3">归档</el-menu-item> -->
        <el-menu-item index="/link">友链</el-menu-item>
        <el-menu-item index="/about">关于</el-menu-item>
        <el-submenu index="6">
          <template #title>更多</template>
          <el-menu-item index="/classic">慧海拾珠</el-menu-item>
          <el-menu-item index="/movie">流年光影</el-menu-item>
          <el-menu-item index="/myadmin" v-if="userInfo.isAdmin===true">后台管理</el-menu-item>
        </el-submenu>
      </el-menu>
      <div class="tool-bar">
        <!-- 网站音乐插件 -->
        <!-- <i class="iconfont icon-yinyue" title="悦耳"></i> -->
        <!-- 搜索框 -->
        <div class="search-container">         
          <i class="iconfont icon-sousuo" title="搜索..." @click="showSearchHandler"></i>          
          <form class="search-form" method="post" target="targetIfr">
            <input 
              class="search" 
              type="text" 
              name="s" 
              required="" 
              placeholder="回车搜索..." 
              @keyup.enter="sendSearchMessage('search')"
            >
          </form>
          <iframe name="targetIfr" style="display:none"></iframe> 
        </div>
        <!-- 简繁体icon -->
        <i class="iconfont icon-jiantizhongwen" v-show="getLang==='s'" title="简体" @click="tranLangHandler"></i>
        <i class="iconfont icon-fan" v-show="getLang==='t'" title="正體" @click="tranLangHandler"></i>
        <!-- 用户头像 -->
        <Avatar v-if="userInfo.user"></Avatar>
        <!-- 登录按钮 -->
        <i 
          v-else
          class="iconfont icon-denglu" 
          @click="showLogin(true)"
           title="登录 / 注册"
        ></i>
      </div>
    </div>
  </div>
  <!-- 手机端导航 -->
  <div id="DrawerNav">
    <el-button round class="menu_btn" @click="dialog = true" size="medium">MENU</el-button>
    <el-drawer
      ref="navDrawer"
      v-model="dialog"
      direction="ltr"
      custom-class="menu-drawer"
      size="300px"
      @close="closeDrawerHandler"
    >
      <div class="drawer_content">
        <!-- logo -->
        <img :src="`${baseURL}/files/img/ren.png`" alt="人" class="logo">
        <!-- 搜索 -->
        <div class="search-box">                    
          <form class="search-form" method="post" target="targetIfr">
            <input 
              class="search1" 
              type="text" 
              name="s" 
              required="" 
              placeholder="搜索..." 
              @keyup.enter.native="sendSearchMessage"
            >
            <i class="iconfont icon-sousuo" @click="sendSearchMessage('search1')"></i>
          </form>
          <iframe name="targetIfr" style="display:none"></iframe> 
        </div>
        <!-- 导航菜单 -->
        <ul class="menulist">
          <router-link to="/">
            <li class="menu_item" @click="closeDrawer">首页</li>
          </router-link>
          <li class="menu_item" @click="showMenuClassify=!showMenuClassify">文章</li>
          <li class="menu_classify" v-show="showMenuClassify">
            <router-link to="/articleClassify/1">
              <el-button class="classify_btn" @click="closeDrawer">日常</el-button>
            </router-link>
            <router-link to="/articleClassify/2">
              <el-button class="classify_btn" @click="closeDrawer">技术</el-button>
            </router-link>
          </li>
          <router-link to="/link">
            <li class="menu_item" @click="closeDrawer">友链</li>
          </router-link>
          <router-link to="/about">
            <li class="menu_item" @click="closeDrawer">关于</li>
          </router-link>
          <router-link to="/classic">
            <li class="menu_item" @click="closeDrawer">慧海拾珠</li>
          </router-link>
          <router-link to="/movie">
            <li class="menu_item" @close="closeDrawer">流年光影</li>
          </router-link>
        </ul>
      </div>
      <!-- 功能栏 -->
      <div class="drawer_bar">
        <!-- 网站个性化设置 -->
        <i class="iconfont icon-jiantizhongwen" v-show="getLang==='s'" title="简体" @click="tranLangHandler"></i>
        <i class="iconfont icon-fan" v-show="getLang==='t'" title="正體" @click="tranLangHandler"></i>
        
        <!-- 用户头像 -->
        <img 
          v-if="userInfo.user"
          class="avatar"
          @click="clickAvatarHandler"
          :src="`${baseURL}${userInfo.avatar}`"
        />
        <!-- 登录按钮 -->
        <i 
          v-else
          class="iconfont icon-denglu"       
          @click="showLoginFun"
           title="登录 / 注册"
        ></i>
      </div>
      <div class="set_bar">
        <div class="login">
          <el-button 
            plain 
            class="login_btn"
            @click="modifyUserInfoHandler"
          >
            修改信息
          </el-button>
          <el-button 
            plain 
            type="info" 
            class="login_btn"            
            @click="logoutHandler"
          >
            退出登录
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
  <AppLogin v-show="isShowLoginBox"></AppLogin>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import AppLogin from '@/components/AppLogin'
import Avatar from '@/components/Avatar'

export default {
  name: 'AppNav',
  components: { AppLogin, Avatar },
  data(){
    return{
      activeIndex: '1',
      lang: 's',
      dialog: false,
      showMenuClassify: false,
      showSearch: true,
      barMove: false,
      title: '無&emsp;夢'
    }
  },
  computed:{
    ...mapState(['isShowLoginBox', 'userInfo']),
    getLang(){
      if(!localStorage.getItem('lang')){
        if(navigator.language === 'zh-CN'){
          return 's'
        }else{
          return 't'
        }
      }else{
        return localStorage.getItem('lang')
      }
    }
  },
  // updated(){
  //   this.setDrawerNavHeight()
  // },
  mounted(){
    this.scrollUpHandler()
  },
  methods:{
    ...mapMutations(['showLogin', 'updateUserInfo']),
    // 移动端菜单按钮随滚动条显示和隐藏
    scrollUpHandler(){
      new Headroom(document.querySelector(".menu_btn"), { //这里的 nav-scroll 改为你的导航栏的 id 或 class
        offset : 5, // 在元素没有固定之前，垂直方向的偏移量（以 px 为单位）
        tolerance: 5, // scroll tolerance in px before state changes        
        classes: {
          initial: "menu_btn",  // 当元素初始化后所设置的 class
          pinned: "menu-show", // 向上滚动时设置的 class
          unpinned: "menu-hide" // 向下滚动时所设置的 class
        }
      }).init();
    },
    setDrawerNavHeight(){
      let overlay = document.getElementsByClassName('el-overlay')[0]
      overlay.setAttribute('style',  `height:${document.body.clientHeight}px`)
    },
    // 显示登录框并关闭抽屉
    showLoginFun(){
      this.showLogin(true)
      this.$refs.navDrawer.handleClose()
    },
    closeDrawer(){
      this.$refs.navDrawer.handleClose()
    },
    // 搜索并跳转路由
    async sendSearchMessage(className){
      let searchInput = document.getElementsByClassName(className)[0]      
      let value = searchInput.value.trim()
      if(!value) return
      // 为了支持繁体搜索，这里提前把输入文字转为简体
      let converter = OpenCC.Converter({ from: 'hk', to: 'cn' })
      value = converter(value)
      // console.log(value);
      let {data} = await this.$axios({
        method: 'post',
        url: '/article/search',
        data: {
          targetWord: value
        }
      })

      this.$refs.navDrawer.handleClose()
      if(data.code){
        return this.$message.error(data.msg)
      }
      let idArr = data.data
      this.$router.push({name: 'Search', params:{idArr, value}})
    },
    // 搜索框展开和收缩
    showSearchHandler(){
      let searchContainer = document.getElementsByClassName('search-container')[0]
      let searchIcon = document.getElementsByClassName('icon-sousuo')[0]
      let searchInput = document.getElementsByClassName('search')[0]
      searchInput.value = ""
      if(this.showSearch){
        searchContainer.setAttribute('style', 'width:11rem')
        searchIcon.setAttribute('style', 'border-radius:0')
      }else{
        searchContainer.setAttribute('style', 'width:50px')
        searchIcon.setAttribute('style', 'border-radius:50%')
      }
      this.showSearch = !this.showSearch;
    },
    // 跳转到修改用户信息
    modifyUserInfoHandler(){
      this.$router.push('/userProfile')
    },
    // 退出登录
    async logoutHandler(){
      await this.$axios({
        method: 'post',
        url: '/login/logout'
      })
      
      // 清空vuex里的userInfo数据
      this.updateUserInfo({})
      // 跳转至主页
      this.$router.replace('/')
      // 提示成功
      this.$message.success('您已退出登录')
    },
    // 点击用户头像
    clickAvatarHandler(){
      let drawer_bar = document.getElementsByClassName('drawer_bar')
      let set_bar = document.getElementsByClassName('set_bar')
      if(this.barMove){
        drawer_bar[0].classList.remove('drawer_bar_move')
        set_bar[0].classList.remove('set_bar_move')

        drawer_bar[0].setAttribute('style', 'z-index: 1;')
        set_bar[0].setAttribute('style', 'z-index: 0;')
      }else{        
        drawer_bar[0].classList.add('drawer_bar_move')
        set_bar[0].classList.add('set_bar_move')

        drawer_bar[0].setAttribute('style', 'z-index: 0;')
        set_bar[0].setAttribute('style', 'z-index: 1;')
      }
      this.barMove = !this.barMove
    },
    // 简繁切换
    tranLangHandler(){
      $('.icon-jiantizhongwen').hide()
      $('.icon-fan').hide()
      if(localStorage.getItem('lang') === 's'){
        this.lang = 't'
        $('.icon-fan').show()
      }else{
        this.lang = 's'
        $('.icon-jiantizhongwen').show()
      }
      localStorage.setItem('lang', this.lang)
      this.$zh_tran(localStorage.getItem('lang'))
      setTimeout(() => {
        this.$setFont("#app", "SourceHanSerifCN-Medium")
      }, 200)
    },
    // 关闭抽屉导航时处理动作
    closeDrawerHandler(){
      this.showMenuClassify = false
      this.barMove = true
      this.clickAvatarHandler()
      let searchInput = document.getElementsByClassName('search1')[0]
      searchInput.value = ""
    },
    handleSelect(key, keyPath){
      // console.log(key, keyPath);
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/icon-font/iconfont.css';

@navWidth: 1200px;
@navHeight: 66px;

#Nav{
  position: fixed;
  top: 0;
  width: 100%;
  height: @navHeight;
  background-color: rgba(255, 255, 255, .7);
  backdrop-filter: blur(20px);
  z-index: 1;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .content{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: @navWidth;

    .tool-bar{
      margin-top: -2px;
      .search-container{
        position: relative;
        display: inline-block;
        height: 50px;
        width: 50px;
        margin-right: 5px;
        border-radius: 25px;
        background: #f0f0f0;
        color: #ccc;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        -webkit-transition: 0.3s ease all;
        -moz-transition: 0.3s ease all;
        -ms-transition: 0.3s ease all;
        -o-transition: 0.3s ease all;
        transition: 0.3s ease all;
        .icon-sousuo{
          position: absolute;
          top: -22px;
          left: -5px;
        }
        input.search {
          height: 2.375rem;
          width: 6.5rem;
          border: 0;
          background-color: transparent;
          font-size: .875rem;
          overflow: hidden;
          line-height: 1.5;
          position: absolute;
          left: 56px;
          top: 7px;
          outline: none;
        }
      }
      
      .iconfont{
        font-size: 20px;
        line-height: @navHeight;
        padding: 15px;
        margin: 0 5px;
        vertical-align: -3px;
        background-color: #f0f0f0;
        color: #333;
        border-radius: 50%;
        cursor: pointer;
        transition: .3s;
      }
      .iconfont:hover{
        background-color: #333;
        color: #f0f0f0;
      }
    }

    .blog-name{
      font-weight: bold;
      font-size: 28px !important;
      // font-family: 'Source_Black', serif;
    }

    .el-menu--horizontal>.el-menu-item{
      height: inherit;
      line-height: @navHeight;
    }

    .el-menu.el-menu--horizontal{
      border-bottom: 0px solid transparent;
    }

    /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title{
      height: inherit;
      line-height: @navHeight;
    }

    /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title{
      font-size: 16px;
      color: rgba(0, 0, 0, .9);
    }

    /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
      background-color: transparent;
      color: rgba(0, 0, 0, .7);
    }

    /deep/ .el-submenu__title i{
      color: rgba(0, 0, 0, .9)
    }

    /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover{
      background-color: transparent;
    }
    
    /deep/ .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
      border-bottom: none;
    }
    .el-menu{
      background-color: transparent;

      .el-menu-item{
        font-size: 16px;
        color: rgba(0, 0, 0, .9);
      }

      .el-menu-item.is-active{
        border-bottom: 0px solid transparent;
      }
      
      .el-menu-item:hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
        background-color: transparent;
        color: rgba(0, 0, 0, .7);
      }

      /* title颜色不变淡 */
      .el-menu-item:nth-child(1):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
        background-color: transparent;
        color: rgba(0, 0, 0, .9);          
      }
    }
  }

  @media screen and (min-width: @navWidth){
    .content{
      width: @navWidth;
    }
  }

  @media screen and (min-width: 991px) and (max-width: @navWidth) {
    .content{
      width: 900px;
      .el-menu-item{
        padding: 0 15px;
      }
      :deep(.el-menu--horizontal>.el-submenu .el-submenu__title){
        padding: 0 15px;
      }
    }
    .content .tool-bar .search-container input.search{
      height: 2.475rem;
    }
  }

  @media screen and (min-width: 811px) and (max-width: 992px) {
    .content{
      width: 780px;
    }
    .content .tool-bar .search-container input.search{
      height: 2.975rem;
      width: 5.5rem;
    }
  }
}

#DrawerNav{
  display: none;
}

@media screen and (max-width:812px){
  #Nav{
    display: none;
  }
  #DrawerNav{
    display: block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .menu_btn{
      position: fixed;
      top: 0;
      left: 0;
      margin: 10px;
      color: #333;

      border: 1px solid #333;
      background-color: #F7F8F9;
      -webkit-transition: .5s;
      -moz-transition: .5s;
      -ms-transition: .5s;
      -o-transition: .5s;
      transition: .5s;
      &:hover{
        background-color: #333;
        color: #fff;
      }
    }

    .menu-hide{
      left: -11rem;
    }
    .menu-show{
      left: 0;
    }

    :deep(.el-overlay){
      // height: 100vh;
      .menu-drawer{
        background-color: #fafafa;
        .drawer_content{
          position: relative;
          overflow: hidden;
          overflow-y: scroll;
          height: 72vh;
          .logo{
            position: relative;
            text-align: center;
            display: inline-block;
            width: 10rem;
            height: 10rem;
          }
          .search-box{
            position: relative;
            .search-form{
              .search1{
                width: 83%;
                height: 26px;
                padding: 0.875rem 2.1875rem 0.875rem 1.75rem;
                background: #fff no-repeat 90%;
                border: none;
                color: #ff5400;
                font-size: 1.3rem;
                line-height: 1.3em;
                text-align: center;
                outline: none;
                -webkit-transition: all 0.3s linear;
                -moz-transition: all 0.3s linear;
                -ms-transition: all 0.3s linear;
                -o-transition: all 0.3s linear;
                transition: all 0.3s linear;
              }
              .icon-sousuo{
                position: absolute;
                top: 1.025rem;
                right: 0.8125rem;
                color: #555;
                font-weight: bold;
                padding: 0.3125rem;
                background-color: transparent;
                border: 0;
                font-size: 1.5rem;
              }
            }
          }
          .menulist{            
            .menu_item{
              font-size: 20px;
              color: #333;
              height: 50px;
              line-height: 50px;
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
              &:hover{
                background-color: #EFEFEF;
                cursor: pointer;
              }
            }
            .menu_classify{
              height: 60px;
              background-color: #EFEFEF;
              .classify_btn{
                margin: 10px;
                color: #333;
                &:hover{
                  background-color: #FAFAFA;
                  border: 1px solid #dcdfe6;
                }
              }
            }
          }
        }
        .drawer_bar{
          position: absolute;
          width: 100%;
          height: 70px;
          background-color: #fff;
          bottom: 0;
          box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .12);
          transition: .4s ease;
          z-index: 1;
          .iconfont{
            font-size: 15px;            
            padding: 15px;
            margin: 0 5px;
            vertical-align: -2px;
            line-height: 70px;
            background-color: #f0f0f0;
            color: #333;
            border-radius: 50%;
            cursor: pointer;
            transition: .3s;
          }
          .iconfont:hover{
            background-color: #333;
            color: #f0f0f0;
          }
          .avatar{
            width: 45px;
            height: 45px;
            background-size: cover;
            background-position: center;
            border-radius: 50%;
            vertical-align: middle;
            cursor: pointer;
          }
        }

        .set_bar{
          position: absolute;
          width: 100%;
          bottom: -70px;
          background-color: #F0F0F0;
          transition: .4s ease;
          z-index: 0;
          .login{
            height: 70px;
            .login_btn{
              margin-top: 15px;
            }
          }
          &::after{
            content: '';
            position: absolute;
            width: 0; 
            height: 0; 
            font-size: 0; 
            border-width: 10px; 
            border-style: solid; 
            border-color: #f0f0f0 transparent transparent;
            overflow: hidden;
            right: 113px;
            top: -19px;
            transform: rotate(180deg);
          }
        }

        .drawer_bar_move{
          transform: translate(0px, -70px);
        }
        .set_bar_move{
          transform: translate(0px, -70px);
        }
      }

      .el-drawer__header{
        z-index: 1;
      }

      .el-drawer__close-btn{
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        width: 1rem;
        height: 8rem;
        background-color: #333;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border: none;
        cursor: pointer;
        font-size: var(--el-font-size-extra-large);
        color: inherit;
        outline: 0;
        .el-icon{
          line-height: 0em;
        }
        .el-icon-close:before{
          content: '||';
        }
      }
    }
  }
}
</style>